<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${site_title} </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="${site_title}"/>
    <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive"/>
    <meta name="author" content="FREEHTML5.CO"/>
    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content=""/>
    <meta name="twitter:image" content=""/>
    <meta name="twitter:url" content=""/>
    <meta name="twitter:card" content=""/>

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Google Webfonts -->
    <link href='http://fonts.useso.com/css?family=Roboto:400,300,100,500' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Sanchez:400,400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Playfair+Display:400,400italic' rel='stylesheet' type='text/css'>

    <!-- Animate.css -->
    <link rel="stylesheet" href="${site_url}front/js/about/css/animate.css">
    <link rel="stylesheet" href="${site_url}front/css/icon.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${site_url}front/js/about/css/icomoon.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="${site_url}front/js/about/css/magnific-popup.css">
    <!-- Theme Style -->
    <link rel="stylesheet" href="${site_url}front/js/about/css/style.css">
    <link rel="stylesheet" href="${site_url}front/css/custom.css">
    <link rel="stylesheet" href="${site_url}front/js/plugins/tooltipster/css/tooltipster.css">
    <!-- Modernizr JS -->
    <script src="${site_url}front/js/about/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="${site_url}front/js/about/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header role="banner" id="fh5co-header" style="background-image: url(${site_url}front/img/hero-4.jpg);"
        data-stellar-background-ratio="0.5">
    <div class="fh5co-overlay"></div>
    <div class="container">
        <div class="fh5co-intro-wrap">
            <div class="fh5co-intro">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 text-center">
                        <h1 class="fh5co-intro-lead animate-1 to-animate">Yoqu</h1>
                        <h2 class="fh5co-intro-sub animate-2 to-animate">Hi! 我是Yoqu，JAVA/WEB开发者一枚</h2>
                        <p class="fh5co-social text-center" id="fh5co-intro-social">
                            <a href="#" class="to-animate"><i class="icon-facebook-with-circle"></i></a>
                            <a href="#" class="to-animate"><i class="icon-twitter-with-circle"></i></a>
                            <a href="#" class="to-animate"><i class="icon-dribbble-with-circle"></i></a>
                            <a href="#" class="to-animate"><i class="icon-google-with-circle"></i></a>
                            <a href="#" class="to-animate"><i class="icon-instagram-with-circle"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<main role="main" id="fh5co-main">
    <div class="container" id="bio-animate">
        <div class="row row-padded">
            <div class="col-md-3">
                <h2 class="fh5co-section-heading to-animate">个人简介<span class="fh5co-border"></span></h2>
            </div>
            <div class="col-md-8 col-md-push-1">
                <div class="row">
                    <div class="col-md-6 to-animate">
                        <p>高中接触互联网并担任站长，负责网站运营。大学选择计算机专业。学习java 、C、c#、php语言。大二在企业兼职，做php开发。学校主修java，学习java web
                            ,使用过struts、hibernate、spring、maven、mybatis等java框架开发网站。</p>

                        <p>熟练使用bootstrap、Amazeui前端框架开发html页面，熟悉jQuery的基本用法，会DOM操作对象。会使用git，svn等团队协作工具</p>
                    </div>
                    <div class="col-md-6 to-animate">
                        <p>对新技术有渴望，希望能靠自己技术做出对社会有意义的事情，对编程充满激情！ </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- END .row -->
    </div>
    <!-- END .container -->

    <div class="fh5co-section-seperator" style="background-image: url(${site_url}front/img/hero-2.jpg);"
         data-stellar-background-ratio="0.5">
        <div class="fh5co-overlay"></div>
        <div class="container" id="counter-animate">
            <div class="fh5co-section-content-wrap">
                <div class="fh5co-section-content">
                    <div class="row">
                        <div class="col-md-4 text-center to-animate">
                            <span class="fh5co-counter js-counter" data-from="0" data-to="28" data-speed="5000"
                                  data-refresh-interval="50"></span>
                            <span class="fh5co-counter-label">服务的客户</span>

                        </div>
                        <div class="col-md-4 text-center to-animate">
                            <span class="fh5co-counter js-counter" data-from="0" data-to="57" data-speed="5000"
                                  data-refresh-interval="50"></span>
                            <span class="fh5co-counter-label">完成项目</span>
                        </div>
                        <div class="col-md-4 text-center to-animate">
                            <span class="fh5co-counter js-counter" data-from="0" data-to="34023" data-speed="5000"
                                  data-refresh-interval="50"></span>
                            <span class="fh5co-counter-label">代码量</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END .container -->

    <div class="container" id="projects-animate">
        <div class="row row-padded">
            <div class="col-md-3">
                <h2 class="fh5co-section-heading to-animate">项目<span class="fh5co-border"></span></h2>
                <p class="to-animate">我独立完成的完整项目列举</p>
            </div>
            <div class="col-md-8 col-md-push-1">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6 col-xxs-12 fh5co-project to-animate">
                        <a href="${site_url}front/img/work_1.jpg" class="image-popup">
                            <div class="fh5co-overlay-text">Project no. 1</div>
                            <div class="fh5co-overlay"></div>
                            <img src="${site_url}front/img/work_1.jpg" alt="Free HTML5 Template" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6 col-xxs-12 fh5co-project to-animate">
                        <a href="${site_url}front/img/work_2.jpg" class="image-popup">
                            <div class="fh5co-overlay-text">Project no. 2</div>
                            <div class="fh5co-overlay"></div>
                            <img src="${site_url}front/img/work_2.jpg" alt="Free HTML5 Template" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6 col-xxs-12 fh5co-project to-animate">
                        <a href="${site_url}front/img/work_3.jpg" class="image-popup">
                            <div class="fh5co-overlay-text">Project no. 3</div>
                            <div class="fh5co-overlay"></div>
                            <img src="${site_url}front/img/work_3.jpg" alt="Free HTML5 Template" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6 col-xxs-12 fh5co-project to-animate">
                        <a href="${site_url}front/img/work_4.jpg" class="image-popup">
                            <div class="fh5co-overlay-text">Project no. 4</div>
                            <div class="fh5co-overlay"></div>
                            <img src="${site_url}front/img/work_4.jpg" alt="Free HTML5 Template" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6 col-xxs-12 fh5co-project to-animate">
                        <a href="${site_url}front/img/work_5.jpg" class="image-popup">
                            <div class="fh5co-overlay-text">Project no. 5</div>
                            <div class="fh5co-overlay"></div>
                            <img src="${site_url}front/img/work_5.jpg" alt="Free HTML5 Template" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6 col-xxs-12 fh5co-project to-animate">
                        <a href="${site_url}front/img/work_6.jpg" class="image-popup">
                            <div class="fh5co-overlay-text">Project no. 6</div>
                            <div class="fh5co-overlay"></div>
                            <img src="${site_url}front/img/work_6.jpg" alt="Free HTML5 Template" class="img-responsive">
                        </a>
                    </div>

                </div>
            </div>
        </div>
        <!-- END .row -->
    </div>
    <!-- END .container -->

    <div class="fh5co-section-seperator" id="testimony-animate"
         style="background-image: url(${site_url}front/img/hero-3.jpg);" data-stellar-background-ratio="0.5">
        <div class="fh5co-overlay"></div>
        <div class="container">
            <div class="fh5co-section-content-wrap">
                <div class="fh5co-section-content">
                    <div class="row">
                        <div class="col-md-9 col-md-offset-1 fh5co-testimony to-animate">
                            <blockquote>
                                <p class="text-center quote">&ldquo;<em>天下难事，必作于易；天下大事，必作于细</em>. &rdquo; <cite
                                        class="author">&mdash; 老子</cite></p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END .container -->

    <div class="container" id="services-animate">
        <div class="row row-padded">
            <div class="col-md-3">
                <h2 class="fh5co-section-heading to-animate">我的服务<span class="fh5co-border"></span></h2>
                <p class="to-animate">如果你有网站相关的需求，可以联系我做外包.不管是基于java或是php都可以.</p>
            </div>
            <div class="col-md-8 col-md-push-1">
                <div class="row">
                    <div class="col-md-12">
                        <div class="fh5co-accordion-wrap">
                            <div class="fh5co-accordion to-animate">
                                <div class="fh5co-accordion-head">
                                    <a href="#" class="fh5co-accordion-toggle js-fh5co-accordion-toggle">更多</a>
                                    <h3><i class="icon-laptop"></i>网站设计</h3>
                                </div>
                                <div class="fh5co-accordion-body">
                                    <p>完整的网站设计，可做基于java的后台系统，也可以做php的轻量级系统，根据您的选择，做到最满意的结果。</p>
                                </div>
                            </div>

                            <div class="fh5co-accordion to-animate">
                                <div class="fh5co-accordion-head">
                                    <a href="#" class="fh5co-accordion-toggle js-fh5co-accordion-toggle">更多</a>
                                    <h3><i class="icon-mobile"></i>Android 应用开发</h3>
                                </div>
                                <div class="fh5co-accordion-body">
                                    <p>完整的Android软件开发，给您提供优质的服务。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END .row -->

    </div>
    <!-- END .container -->

    <div class="fh5co-section-seperator fh5co-section-seperator-white" id="contact-animate"
         style="background-image: url(${site_url}front/img/hero-5.jpg);" data-stellar-background-ratio="0.5">
        <div class="fh5co-overlay"></div>
        <div class="container">
            <div class="fh5co-section-content-wrap">
                <div class="fh5co-section-content">
                    <div class="row">

                        <div class="col-md-3">
                            <h2 class="fh5co-section-heading to-animate">联系我<span class="fh5co-border"></span></h2>

                            <ul class="fh5co-contact">
                                <li class="fh5co-contact-address to-animate">
                                    <i class="icon-home"></i>
                                    四川省成都市高新区
                                </li>
                                <li class="to-animate"><i class="icon-phone"></i> +8618408258358</li>
                                <li class="to-animate"><i class="icon-email"></i>yoqulin@qq.com</li>
                            </ul>
                        </div>

                        <div class="col-md-8 col-md-push-1">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group to-animate">
                                        <label for="name" class="sr-only">姓名</label>
                                        <input type="text" id="name" class="form-control" placeholder="姓名">
                                    </div>
                                    <div class="form-group to-animate">
                                        <label for="email" class="sr-only">邮箱</label>
                                        <input type="email" id="email" class="form-control" placeholder="邮箱">
                                    </div>
                                    <div class="form-group to-animate">
                                        <label for="phone" class="sr-only">电话号码</label>
                                        <input type="text" id="phone" class="form-control" placeholder="电话号码">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group to-animate">
                                        <label for="message" class="sr-only">消息</label>
                                        <textarea name="" id="message" cols="30" rows="5" class="form-control"
                                                  placeholder="消息"></textarea>
                                    </div>
                                    <div class="form-group to-animate">
                                        <input type="submit" class="btn btn-primary btn-block" value="发送">
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END .container -->

</main>

<footer role="contentinfo" id="fh5co-footer">
    <div class="container" id="footer-animate">
        <div class="row row-padded">
            <div class="col-md-8 col-md-push-4">
                <p class="to-animate">&copy;<a href="www.yoqu.org">yoqu</a> All Rights Reserved. Design by: yoqu</p>
            </div>
        </div>
    </div>
    <!-- END .container -->
</footer>
<div class="leftbox z-depth-3">
    <a href="${site_url}" class="box1 "><i class="icon iconfont ">&#xf0292;</i></a>
</div>
<!-- jQuery -->
<script src="${site_url}front/js/about/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="${site_url}front/js/about/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="${site_url}front/js/about/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="${site_url}front/js/about/jquery.waypoints.min.js"></script>
<!-- Stellar -->
<script src="${site_url}front/js/about/jquery.stellar.min.js"></script>
<!-- countTo -->
<script src="${site_url}front/js/about/jquery.countTo.js"></script>
<!-- Magnific Popup -->
<script src="${site_url}front/js/about/jquery.magnific-popup.min.js"></script>
<!-- Main JS -->
<script src="${site_url}front/js/about/main.js"></script>
<script type="text/javascript" src="${site_url}front/js/plugins/tooltipster/js/jquery.tooltipster.min.js"></script>
<script>
    $(function(){
        $('.leftbox a').hover(function () {
            $(this).animate({width: '40px'}, 300);
        }, function () {
            $(this).animate({width: '50px'}, 300);
        });
        $('.leftbox .box1').tooltipster({
            content: $('<span>返回首页</span>'),
            position: "left",
        });
    });
</script>
</body>
</html>
